<template>
  <div class="breadcrumb-container">
    <div
      @click="handleClick(item)"
      class="item"
      v-for="(item, index) in breads"
      :key="item.key"
      :style="{ 'z-index': breads.length - index + 1 }"
    >
      <SvgIcon :icon="item.myIcon" v-if="item.myIcon" class="mr-1"></SvgIcon>
      <div class="text">
        <n-ellipsis style="max-width: 120px">
          {{ item.label }}
        </n-ellipsis>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IndexObj } from '@/types/commom'

const props = defineProps<{
  breads: IndexObj[]
}>()

const emits = defineEmits<{
  (e: 'breadClick', item: IndexObj): void
}>()

const handleClick = (item: IndexObj) => {
  emits('breadClick', item)
}
</script>

<style scoped lang="scss">
.breadcrumb-container {
  display: flex;

  .item {
    font-size: 13px;
    cursor: pointer;
    background-image: url('@/assets/images/ybutton.png');
    background-repeat: no-repeat;
    background-position: 100% 0;
    cursor: pointer;
    height: 27px;
    min-width: 16px;
    line-height: 27px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0px 25px 0px 25px;
    margin-left: -15px;
    position: relative;
    vertical-align: top;

    &::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      transform: scale(0);
      background-color: #888;
      opacity: 0;
      transition: 0.3s;
    }

    &:active {
      background-position: 100% -96px;
      color: #222;
    }

    &:active::after {
      opacity: 0.2;
      transform: scale(2);
    }
  }
}
</style>
